<template>
    <div class="api-info-table-all">
        <table-title :type="type"></table-title>
        <table class="api-info-table" width="100%" cellspacing="0" cellpadding="0" border="0">
            <colgroup>
                <col width="5%">
                <col width="35%">
                <col width="14%">
                <col width="11%">
                <col width="6%">
                <col width="29%">
            </colgroup>
            <thead>
                <tr>
                    <th>操作</th>
                    <th>
                        字段名
                        <Tooltip placement="top">
                            <Icon type="ios-information-outline"></Icon>
                            <div slot="content" v-if="true">
                                显示或隐藏字段名线条
                                <i-switch
                                    v-model="isShowTdBorder"
                                    size="small">
                                </i-switch>
                            </div>
                        </Tooltip>
                    </th>
                    <th>含义</th>
                    <th>类型</th>
                    <th>可否为空</th>
                    <th>备注（mock规则）</th>
                </tr>
            </thead>
            <tbody>
                <tr-params
                    v-if="params && params.length"
                    v-for="(item, index) in params"
                    :key="index"
                    :type="type"
                    :param="item"
                    :paramLevel="0"
                    :isShowTdBorder="isShowTdBorder"
                    :trId="'' + index"
                    :isEditing="isEditing">
                </tr-params>
            </tbody>
        </table>
        <Button
            class="btn-addparam"
            v-if="isEditing"
            type="dashed"
            @click="addParam">
            <Icon type="plus-round"></Icon> 添加参数
        </Button>
    </div>
</template>

<script>
    import Vue from 'vue';
    import TableTitle from './Table-title.vue';
    import TrParams from './Tr-params.vue';

    export default {
        name: 'TableAll',
        components: {
            'table-title': TableTitle,
            'tr-params': TrParams,
        },
        props: {
            type: {
                type: Number,
                default: 1,
            },
            params: {
                type: Array,
                default: () => [],
            },
            isEditing: {
                type: Boolean,
                default: false,
            }
        },
        data() {
            return {
                isShowTdBorder: true,
            };
        },
        methods: {
            /**
             * addParam 添加参数
             */
            addParam() {
                this.$emit('addParam');
            }
        },
    }
</script>

<style lang="less" scoped>
    .api-info-table-all {
        .api-info-table {
            border: 1px solid #e9eaec;
            th {
                height: 40px;
                background-color: #f8f8f9;
                text-overflow: ellipsis;
                border: 1px solid #e9eaec;
            }
        }
        .btn-addparam {
            width: 100%;
        }
    }
</style>